Learning d3.js Data Visualization - Second Edition by Ændrew Rininsland & Swizec Teller

Author:Ændrew Rininsland & Swizec Teller [Rininsland, Ændrew]
Language: eng
Format: azw3
Publisher: Packt Publishing
Published: 2016-04-28T04:00:00+00:00

We're keeping the user interface deliberately simple but remember that simpler is often better, particularly when building for an audience on mobile devices (sliders are much harder to use on touch devices than buttons, for instance).

Basic interaction

Much like elsewhere in JavaScript land, the principle for interaction is simple—attach an event listener to an element and do something when it's triggered. We add and remove listeners to and from selections with the .on() method, an event type (for instance, click), and a listener function that is executed when the event is triggered.

We can set a capture flag which ensures our listener is called first and all other listeners wait for our listener to finish. Events bubbling up from children elements will not trigger our listener.

You can rely on the fact there will only ever be a single listener for a particular event on an element because old listeners for the same event are removed when new ones are added. This is very useful when trying to eliminate unpredictable behavior.

Just like other functions acting on element selections, event listeners get the current datum and index and set the this context to the DOM element. The global d3.event lets you access the actual event object.

We're going to create a new class that extends our last chart:

export class InteractivePrisonPopulationChart extends PrisonPopulationChart { constructor(path) { let p = super(path); this.scenes = require('./data/prison_scenes.json'); this.scenes.forEach((v, i) => v.cb = this['loadScene' + i].bind(this)); p.then(() => this.addUIElements()); } }

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.